<template>
  <div>
    <highcharts :options="chartOptions" :callback="myCallback"></highcharts>
  </div>
</template>

<script>
  import { Chart } from "highcharts-vue";

  // import { getChartHazardType } from "@/api/hidden"

  export default {
    name: "ChartHazardType ",
    components: {
      highcharts: Chart,
    },
    data() {
      return {
        ser:[{
          name: 'Chrome',
          y: 61.41,
          sliced: true,
          selected: true
        }, {
          name: 'Internet Explorer',
          y: 11.84
        }, {
          name: 'Firefox',
          y: 10.85
        }, {
          name: 'Edge',
          y: 4.67
        }, {
          name: 'Safari',
          y: 4.18
        }, {
          name: 'Sogou Explorer',
          y: 1.64
        }, {
          name: 'Opera',
          y: 1.6
        }, {
          name: 'QQ',
          y: 1.2
        }, {
          name: 'Other',
          y: 2.61
        }],
        chartOptions: {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
          },
          title: {
            text: '种类分布'
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          series: [{
            name: '百分比',
            colorByPoint: true,
            data: []  //数据设为空即可，方法中动态赋值
          }],
          credits: {
            enabled:false
          }
        }
      };
    },
    methods: {
      myCallback() {
        this.chartOptions.series[0].data= this.ser  //此处可以为后台拼凑好的数据
      }
    }
  };
</script>


<style scoped>

</style>
